<template>
    <div class="body">
        <el-form-item :label="$t('shop.goodsParams.params_template')">
            <div class="params-template">
                <el-select
                    v-model="state.templateValue"
                    value-key="id"
                    :placeholder="t('shop.goodsParams.Select params template')"
                    filterable
                    clearable
                    @change="onChangeParams"
                    @clear="clearParams"
                    style="width: 300px"
                >
                    <el-option v-for="item in props.templateData" :key="item.id" :label="item.name" :value="item" />
                </el-select>
                <div class="template-help">
                    {{ $t('shop.goodsParams.params_template_help') }}
                </div>
            </div>
        </el-form-item>
        <el-form-item :label="$t('shop.goodsParams.params_detail')">
            <div class="params-detail">
                <el-row :gutter="10" class="detail-title">
                    <el-col :span="10" class="ba-array-key">{{ state.keyTitle }}</el-col>
                    <el-col :span="10" class="ba-array-value">{{ state.valueTitle }}</el-col>
                </el-row>
                <el-row class="ba-array-item" v-for="(item, idx) in state.value" :gutter="10" :key="idx">
                    <el-col :span="10">
                        <el-input v-model="item.key"></el-input>
                    </el-col>
                    <el-col :span="10">
                        <el-input v-model="item.value"></el-input>
                    </el-col>
                    <el-col :span="4">
                        <el-button @click="onDelArrayItem(idx)" size="small" icon="el-icon-Delete" circle />
                    </el-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col :span="10" :offset="10">
                        <el-button v-blur class="ba-add-array-item" @click="onAddArrayItem" icon="el-icon-Plus">{{ t('Add') }}</el-button>
                    </el-col>
                </el-row>
            </div>
        </el-form-item>
    </div>
</template>

<script setup lang="ts">
import { reactive, watch } from 'vue'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

type baInputArray = { key: string; value: string }
type template = { id: number; name: string; value: baInputArray[] }

interface Props {
    modelValue: baInputArray[]
    keyTitle?: string
    valueTitle?: string
    templateData?: template[]
}

const emits = defineEmits(['update:modelValue'])

const props = withDefaults(defineProps<Props>(), {
    modelValue: () => [],
    keyTitle: '',
    valueTitle: '',
})

const state = reactive({
    value: props.modelValue || [],
    keyTitle: props.keyTitle ? props.keyTitle : t('utils.ArrayKey'),
    valueTitle: props.valueTitle ? props.valueTitle : t('utils.ArrayValue'),
    templateValue: '',
})

const onAddArrayItem = () => {
    state.value.push({
        key: '',
        value: '',
    })
}

const onDelArrayItem = (idx: number) => {
    state.value.splice(idx, 1)
    if (state.value.length < 1) {
        onAddArrayItem()
    }
}

const onChangeParams = (val: any) => {
    if (!val || !val.value) return
    state.value = state.value.filter((item: baInputArray) => {
        return item.key !== '' && item.value !== ''
    })
    state.value = val.value
}

const clearParams = () => {
    state.value = []
}

watch(
    () => props.modelValue,
    (newVal) => {
        state.value = newVal
        // state.templateValue = {}

        emits('update:modelValue', state.value)
    }
)

watch(
    () => state.value,
    (newVal) => {
        if (newVal) {
            emits('update:modelValue', newVal)
        }
    }
)
</script>

<style scoped lang="scss">
.body {
    width: 100%;
    padding-bottom: 20px;
}
.params-template {
    @media screen and (min-width: 1024px) {
        width: 50%;
    }
}
.ba-array-key,
.ba-array-value {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 0;
    color: var(--el-text-color-secondary);
}
.ba-array-item {
    margin-bottom: 6px;
}
.ba-add-array-item {
    float: right;
}
.params-template {
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    justify-content: center;
    align-items: flex-start;
    color: var(--el-text-color-secondary);
}
.params-template {
    @media screen and (min-width: 1024px) {
        width: 60%;
        .el-select {
            width: 50%;
        }
    }
}
.params-detail {
    @media screen and (min-width: 1024px) {
        width: 60%;
    }
    width: 80%;
}

.template-help {
    color: var(--el-color-danger);
}
</style>
